<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('添加部门')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">

            <div class="layui-form-item">
                <label for="deptTree" class="layui-form-label">
                    <span class="x-red">*</span>上级部门
                </label>
                <div class="layui-input-block">
                    <input type="text" id="deptTree" required="" lay-verify="deptTree"
                           autocomplete="off" class="layui-input" th:value="${sysDept.deptName}">
                    <input type="text" hidden="true" id="parentId" name="parentId" th:value="${sysDept.deptId}">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="deptName" class="layui-form-label">
                    <span class="x-red">*</span>部门名称
                </label>
                <div class="layui-input-block">
                    <input type="text" id="deptName" name="deptName" required="" lay-verify="required|deptName"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="leader" class="layui-form-label">
                    <span class="x-red">*</span>负责人
                </label>
                <div class="layui-input-block">
                    <input type="text" id="leader" name="leader" required="" lay-verify="leader"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="phone" class="layui-form-label">
                    <span class="x-red">*</span>联系方式
                </label>
                <div class="layui-input-block">
                    <input type="text" id="phone" name="phone" required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="email" class="layui-form-label">
                    <span class="x-red">*</span>电子邮箱
                </label>
                <div class="layui-input-block">
                    <input type="text" id="email" name="email" required="" lay-verify="email"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="orderNum" class="layui-form-label">
                    <span class="x-red">*</span>显示顺序
                </label>
                <div class="layui-input-block">
                    <input type="text" id="orderNum" name="orderNum" required="" lay-verify="required|number"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="visible" class="layui-form-label">
                    <span class="x-red">*</span>部门状态
                </label>
                <div class="layui-input-block" id="visible">
                    <input type="radio" name="status" value="0" title="正常" checked="true">
                    <input type="radio" name="status" value="1" title="停用">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn" lay-filter="add" lay-submit="">
                    增加
                </button>
            </div>
        </form>
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<th:block th:include="include :: dtree_js"/>
<!--<th:block th:include="include :: iconPicker_js"/>-->
<script>
    layui.use(['form', 'layer', 'dtree'],
        function () {

            $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var dtree = layui.dtree;

            //form 表单校验
            form.verify(
                {
                    deptName: function (value) {

                        let tips;
                        $.ajax({
                            url: ctx + 'system/dept/deptNameModify',
                            type: 'POST',
                            data: {roleName: $('#deptName').val()},
                            async: false,
                            success: function (res) {
                                tips = res;
                            }
                        });

                        if (tips.code != 0) {
                            return tips.msg;
                        }

                    }
                });







            //部门树 下拉
            $('#deptTree').click(function () {
                var deptTree = null;
                layer.open({
                    type: 1,
                    title: '部门树',
                    area: ["500px", "80%"],
                    content: '<ul id="DeptTree" class="dtree" data-id="0"></ul>',
                    success: function (layero, index) {

                        deptTree = dtree.render({
                            elem: '#DeptTree',
                            url: ctx + 'system/dept/detpDtree',
                            method: 'POST',
                            dataStyle: "layuiStyle",  //使用layui风格的数据格式
                            dataFormat: "list",  //配置data的风格为list
                            icon: ["0", "5"],
                            response: {
                                statusName: "code", //返回标识（必填）
                                statusCode: 0, //返回码（必填）
                                message: "msg", //返回信息（必填）
                                rootName: "data", //根节点名称（必填）
                                treeId: "id", //节点ID（必填）
                                parentId: "parentId", //父节点ID（必填）
                                title: "title", //节点名称（必填）
                            },
                            success: function (data, ul, first) {
                                // console.log(data);
                            },

                        });

                        // 绑定节点的双击
                        dtree.on("nodedblclick('DeptTree')", function (obj) {
                            $("#deptTree").val(obj.param.context);
                            $("#parentId").val(obj.param.nodeId);
                            layer.close(index);
                        });
                    },

                    yes: function (_index, _layero) {
                        var param = dtree.getNowParam("DeptTree"); // 获取当前选中节点

                        $("#deptTree").val(param.context);
                        $("#parentId").val(param.nodeId);
                        layer.close(index);
                    }
                });
            });


            // 表单提交
            form.on('submit(add)',function (_data) {
                // layer.msg(JSON.stringify(_data));
                $.ajax({
                   url: ctx +'system/dept/insert',
                   type:'POST',
                   data: _data.field,
                    success: function (res) {
                       layer.msg(res.msg);
                       // 关闭当前窗口
                        if(res.code==0){
                            //关闭当前frame
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        }

                    }
                });


                return false;
            })


    })


</script>
</body>

</html>